<template>
  <div class="playBox">
    <div
      id="videoBox"
      class="container"
      @mouseenter="showControls"
      @mouseleave="hideControls"
      @mousemove="showControls"
      :style="isCursor?'cursor:pointer':'cursor:none'"
    >
      <video id="video" @timeupdate="timeupdate" @ended="ended" @dblclick="fullScreen" @click="play">
        <source src="assets/01.mp4" type="video/mp4" />您的浏览器不支持
      </video>
      <div :class="'top ' + logoAni" @click="play">
        <span class="playBtn">
          <i>&#xe60c;</i>
        </span>
        <span class="logo">LIUH</span>
      </div>
      <div class="bottom" :class="controlCls">
        <div
          class="progress"
          @click.stop="changProClk"
          @mouseenter="proPoint=true"
          @mouseleave="proPoint=false"
        >
          <div class="current" id="currentPro" :style="'width:' + curWidth">
            <div class="point" @mousedown="changePro" v-show="proPoint"></div>
          </div>
        </div>
        <div class="time">
          <span>{{curTime}}</span>
          <span>/</span>
          <span>{{duration}}</span>
        </div>
        <span class="play" id="play" @click="play">
          <i v-show="ispause">&#xe63a;</i>
          <i v-show="!ispause">&#xe622;</i>
        </span>
        <div class="rightCtrl">
          <span class="volume" @mouseenter="showCurVol" @mouseleave="curVolHide">
            <i>&#xe64d;</i>
          </span>
          <div
            class="currentVolume"
            v-show="curVolShow"
            @mouseleave="curVolHide"
            @mouseenter="showCurVol"
          >
            <span class="tolVol" id="tolVol" @click="changeVol2"></span>
            <div class="curVol" id="curVol">
              <span class="point" @mousedown="changeVol"></span>
            </div>
            <span class="num">{{curVol}}</span>
          </div>
          <span class="fullScreen" @click="fullScreen">
            <i v-show="isFull">&#xe768;</i>
            <i v-show="!isFull">&#xe623;</i>
          </span>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "play",
  props: {
    playUrl: {
      type: String,
      default() {
        return "";
      }
    }
  },
  data() {
    return {
      Video: null,
      videoBox: null,
      ispause: false,
      duration: "00:00:00",
      curTime: "00:00:00",
      curWidth: 0,
      defaultWidth: 0,
      defaultHeight: 0,
      curVolShow: false,
      curVol: 40,
      isHideVol: true,
      logoAni: "",
      processTol: 1200,
      proPoint: false,
      isFull: false, //是否全屏
      controlCls: "controlShow", //是否显示控制条
      controlInter: null,
      isCursor: true, //视频区域是否显示鼠标
      timer: null //解决双击与单击事件冲突
    };
  },
  mounted: function() {
    this.Video = document.getElementById("video");
    this.videoBox = document.querySelector("#videoBox");
    const self = this;
    setTimeout(() => {
      this.duration = this.formatTime(this.Video.duration);
    }, 500);
    window.addEventListener("fullscreenchange", e => {
      this.isFull = !this.isFull;
      if (!this.isFull) {
        this.esc();
      }
    });
    document.onkeyup = e => {
      if (e.keyCode === 32) {
        this.play();
      }
    };
  },
  watch: {
    curVol: function() {
      const v = this.Video;
      v.volume = this.curVol / 100;
    }
  },
  methods: {
    play() {
      this.clearTimer(this.timer);
      this.timer = setTimeout(() => {
        const v = this.Video;
        if (v.paused) {
          v.play();
          this.ispause = true;
          this.logoAni = "logoAniHide";
          setTimeout(() => {
            this.logoAni = "logoAniAfter";
          }, 600);
        } else {
          v.pause();
          this.ispause = false;
          this.logoAni = "logoAniShow";
        }
      }, 300);
    },
    timeupdate() {
      const v = this.Video;
      this.curTime = this.formatTime(v.currentTime);
      this.curWidth = 1200 * (v.currentTime / v.duration) + "px";
    },
    ended() {
      this.ispause = false;
      this.logoAni = "logoAniShow";
    },
    showCurVol() {
      if (!this.isHideVol) return;
      this.curVolShow = true;
    },
    curVolHide() {
      if (!this.isHideVol) return;
      this.curVolShow = false;
    },
    changeVol(e) {
      this.isHideVol = false;
      const y = e.clientY;
      const moveDiv = document.getElementById("curVol");
      const curHei = moveDiv.offsetHeight;
      document.onmousemove = e => {
        const h = curHei + (y - e.clientY);
        if (h > 50 || h < 0) {
          return;
        }
        this.curVol = Math.floor((h / 50) * 100);
        moveDiv.style.height = h + "px";
      };
      document.onmouseup = e => {
        this.isHideVol = true;
        document.onmousemove = null;
        document.onmouseup = null;
      };
    },
    changeVol2(e) {
      const y = e.clientY;
      const divVol = document.getElementById("tolVol");
      const h = 50 - (y - divVol.offsetTop);
    },
    changePro(e) {
      const v = this.Video;
      let x = e.clientX;
      const moveDiv = document.getElementById("currentPro");
      let curWid = moveDiv.offsetWidth;
      document.onmousemove = e => {
        let w = curWid + (e.clientX - x);
        if (w > this.processTol) {
          w = this.processTol;
        }
        if (w < 0) {
          w = 0;
        }
        moveDiv.style.width = w + "px";
        v.currentTime = (w / this.processTol) * v.duration;
      };
      document.onmouseup = e => {
        document.onmousemove = null;
        document.onmouseup = null;
      };
    },
    changProClk(e) {
      let x = e.clientX - this.videoBox.getBoundingClientRect().left;
      let processTol = this.videoBox.getBoundingClientRect().width;
      let v = this.Video;
      const moveDiv = document.getElementById("currentPro");
      if (x > processTol || x < 0) {
        return;
      }
      moveDiv.style.width = x + "px";
      v.currentTime = (x / processTol) * v.duration;
    },
    fullScreen() {
      this.clearTimer(this.timer);
      const v = this.videoBox;
      if (!this.isFull) {
        if (v.requestFullscreen) {
          v.requestFullscreen();
        } else if (v.webkitRequestFullscreen) {
          v.webkitRequestFullscreen();
        } else if (v.mozRequestFullScreen) {
          v.mozRequestFullScreen();
        } else if (v.msRequestFullscreen) {
          v.msRequestFullscreen();
        }
      } else {
        if (document.exitFullscreen) {
          document.exitFullscreen();
        } else if (document.webkitExitFullscreen) {
          document.webkitExitFullscreen();
        } else if (document.mozCancelFullScreen) {
          document.mozCancelFullScreen();
        } else if (document.msExitFullscreen) {
          document.msExitFullscreen();
        }
      }
    },
    formatTime(tm) {
      const hour = Math.floor(tm / 3600) || 0;
      const minute = Math.floor((tm % 3600) / 60) || 0;
      const second = Math.floor(tm % 60) || 0;
      return (
        (hour < 10 ? "0" + hour : hour) +
        ":" +
        (minute < 10 ? "0" + minute : minute) +
        ":" +
        (second < 10 ? "0" + second : second)
      );
    },
    esc() {
      this.isFull = false;
    },
    hideControls() {
      this.controlCls = "controlHide";
      clearInterval(this.controlInter);
    },
    showControls() {
      this.controlCls = "controlShow";
      this.isCursor = true;
      clearInterval(this.controlInter);
      this.controlInter = setInterval(() => {
        this.controlCls = "controlHide";
        this.isCursor = false;
        clearInterval(this.controlInter);
      }, 2000);
    },
    clearTimer(timer) {
      if (timer != null) {
        clearTimeout(timer);
        timer = null;
      }
    }
  }
};
</script>
<style lang="less" scoped>
@import "./play.less";
</style>

